<%--
  Created by IntelliJ IDEA.
  User: Love
  Date: 2024/6/24
  Time: 11:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录</title>
    <meta charset="UTF-8">
    <!-- 引入样式文件 -->
    <link href="${pageContext.request.contextPath}/statics/css/eui/index.css" rel="stylesheet">
</head>
<style>
    #name,#password{
        width: 400px;
        height: 30px;
        padding-top: 15px;
    }
    #type_{
        transform: translateY(6px);
    }
    #type{
        transform: translateY(12px);
    }
    #card{
        width: 500px;
        height: 300px;
        margin: 270px auto;
    }
    #card2{
        transform: translateY(3px);
    }
    #sub{
        transform: translateY(5px);
    }
    #sub2{
        margin-right: 35px;
    }
    #xx{
        display: inline-block;
        color: #8c939d;
        transform: translate(385px , -10px);
        cursor: pointer;
    }
</style>
<!-- 引入JS文件 -->
<script src="${pageContext.request.contextPath}/statics/vue/vue.js"></script>
<script src="${pageContext.request.contextPath}/statics/vue/index.js"></script>
<script src="${pageContext.request.contextPath}/statics/vue/axios.min.js"></script>
<body>
<div id="app">
    <el-card class="box-card" id="card">
        <span>欢迎登录</span>
        <span id="xx">x</span>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" id="card2">
            <el-form-item id="name" label="账号" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item id="password" label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item id="type_" label="类型" prop="type">
                <el-radio-group id="type" v-model="ruleForm.type">
                    <el-radio label="1">开发者</el-radio>
                    <el-radio label="2">管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item id="sub">
                <el-button id="sub2" type="primary"  @click="submitForm()">登录</el-button>
                <el-button type="primary" @click="off('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data() {
                return {
                ruleForm: {
                    username: 'test001',
                    password: '123456',
                    type: '1'
                },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择登录类型', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {

            // async submitForm(){
            //     let arr = await axios({
            //         url: '/toLogin',
            //         method:'post',
            //         data: this.ruleForm
            //     })
            //     console.log(arr);
            //     debugger;
            //     if (arr.data.code == "2000"){
            //         this.$message.success("登陆成功")
            //         location.href='/to_index'
            //     }else{
            //         this.$message.error(arr.data.message)
            //     }
            // },

            async submitForm(){
                let arr = await axios({
                    url: '/toLogin',
                    method: "post",
                    data: this.ruleForm
                })
                console.log(arr)
                // debugger;
                if (arr.data.code == "2000") {
                    this.$message.success("登录成功")
                    window.location.href = '/to_index'
                }else{
                    this.$message.error(arr.data.message);
                }
            },
            off(ruleForm){
                this.$refs[ruleForm].resetFields();
            }
            // async login(){
            //     let url = "/";
            //     if (this.type.type == 2){
            //         url = "";
            //     }
            //     let arr = await async ({
            //         url : url,
            //         method : "post",
            //         date:this.type
            //     })
            //     if (arr.data.code == "2000"){
            //         this.$message.success("登录成功");
            //         if (this.type.type == 1){
            //             window.location.href = "";
            //         }else{
            //             window.location.href = "";
            //         }
            //     }else{
            //         this.$message.error("登录失败账号或密码错误");
            //     }
            //     console.log(arr.data);
            // }
        }
    })
</script>
<script src="/statics/js/jquery-1.8.3.min.js"></script>
<script>
    $("#xx").click(function (){
        if (confirm("确认关闭吗?")){
            window.close();
            // opener.clone();
        }
    })
</script>
